<template>
    <div class="my_user">
        <el-dropdown trigger="click">     
            <el-badge :value="200" :max="99" class="item" :is-dot=true>  
                <img src="../../assets/head.png" style="width:30px;height:30px;"/>
            </el-badge>     
            <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item>个人中心</el-dropdown-item>
                 <el-dropdown-item>消息<el-badge :value="5" :max=10></el-badge></el-dropdown-item>                                      
                <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div class="Name">{{UserName}}</div>
    </div>
</template>

<style lang="less">
.my_user{
    float:right;
}
.item{
    margin-top:15px;
    margin-right:10px;
}
.Name{
    float:right;
    margin-top:10px;
}
</style>



<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
export default class User extends Vue {
    public name: string = 'User';
    @Prop()
    public UserName: string   = 'Admin';
}
</script>
